﻿<template id="layout_menu_item_template">
    <el-sub-menu v-if="children.length" :index="`menu_${menu.Id}`">
        <template #title>
            <el-icon v-if="menu.Icon">
                <component :is="menu.Icon"></component>
            </el-icon>
            <span>{{menu.Title}}</span>
        </template>
        <layout_menu_item v-for="child in children" :key="child.Id" :menus="menus" :menu="child" v-on:menu-click="menuClick"></layout_menu_item>
    </el-sub-menu>
    <el-menu-item v-else :index="`menu_${menu.Id}`" v-on:click="menuClick(menu)">
        <el-icon v-if="menu.Icon">
            <component :is="menu.Icon"></component>
        </el-icon>
        <span>{{menu.Title}}</span>
    </el-menu-item>
</template>
<script type="text/javascript">
    var layout_menu_item = {
        template: "#layout_menu_item_template",
        data() {
            return {
                inited: false,
                children: []
            }
        },
        props: ["menus", "menu"],
        methods: {
            init() {
                var that = this;
                that.children = that.menus.filter((m) => {
                    return m.Pid == that.menu.Id;
                });
                that.inited = true;
            },
            menuClick(item) {
                this.$emit("menu-click", item);
            }
        },
        mounted() { this.init(); }
    };
</script>